<template>
  <a-drawer
    closable
    title="明细"
    placement="right"
    width="1000px"
    height="100%"
    :visible="visible"
    @close="close"
  >
    <a-card :bordered="false" style="overflow-y: scroll;height:calc(100vh - 55px - 73px)">
      <a-row :gutter="24">

        <div class='flex'style='box-sizing: border-box'>
          <div class='flex wrap'>
            <div class='items' style='width: 50%;margin-left: 20px'><div class='items-text'>单据编号:</div>  <a-input v-model="queryParam.dataSn" placeholder="请输入单据编号" style='width:200px '> </a-input></div>
            <div class='items' style='width: 45%'><div class='items-text'>操作类型:</div>
              <cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}"
                                           v-model="queryParam.dataType"
                                           dictCode="fee_detail_type"
                                           placeholder="请选择操作类型"
                                           style='width: 200px'
            /></div>
            <div class='items' style='width: 50%;margin-left: 20px'><div class='items-text'>执行时间:</div>
              <span style="display: flex;align-items: center">
                    <a-date-picker placeholder="开始时间"
                                   format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
                                   v-model='queryParam.startDate' style="width: 120px" />
                     <span style="margin: 0 5px">~</span>
                     <a-date-picker placeholder="结束时间"
                                    format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
                                    v-model='queryParam.endDate' style="width: 120px" />
                  </span>
            </div>
            <div class='items' style='width: 45%'><div class='items-text'>操作人:</div>
              <a-input placeholder="请输入操作人" v-model="queryParam.createBy" style='width:200px '></a-input>
            </div>

          </div>


          <div class='button'>
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </div>

        </div>


        <a-col :md="24" :sm="24">
            <a-table
              style="min-height:400px"
              ref="table"
              bordered
              size="middle"
              :scroll="{
              x:'max-content'
               }"
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              @change="handleTableChange">
            </a-table>
        </a-col>
      </a-row>
    </a-card>
    <div class="btn">
      <a-button @click="close" type="primary"  style="margin-right: 2em">关闭</a-button>
<!--      <a-button type="primary" icon="download"  @click="close">确定</a-button>-->
<!--      @click="downExportXls('zhantuBalanceDetail_service')"-->
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, httpAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
export default {
  name: 'costDetail',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow
  },
  data(){
    return{
      title:'',
      visible:false,
      disableMixinCreated:true,
      model:{},
      confirmLoading:false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      superQueryParams: '',
      searchConfig:[
        {
          // label:'订单编号',
          type:'input',
          name:'exampleCode',
          placeholder:'请输入示例编码',
        },{
          // label:'业务员',
          type:'input',
          name:'exampleName',
          placeholder:'请输入示例名称',
        },{
          // label:'订单状态',
          type:'a-select',
          name:'exampleType',
          option: [
            {
              name:'采集要求',
              value:'1'
            },
            {
              name:'核销要求',
              value:'2'
            }
          ],
          placeholder:'请选择类型',
        }, {
          type:'a-select',
          name:'status',
          option:[{
            name:'启用',
            value:'009'
          },{
            name:'停用',
            value:'003'
          }],
          placeholder:'请选择状态',
        }
      ],
      columns: [
        {
          title: '操作类型',
          align: 'center',
          dataIndex: 'dataTypeStr'
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'dataSn'
        },
        {
          title: '对象',
          align: 'center',
          dataIndex: 'budgetOrgName',
          // customRender: (t,r) => {
          //   let vm = this
          //   let child = r.budgetType==1?r.budgetOrgName:r.custName
          //   const obj = {
          //     children: child,
          //     attrs: {}
          //   }
          //   return child
          // }
        },
        {
          title: '调整到对象',
          align: 'center',
          dataIndex: 'inBudgetOrgName'
        },
        {
          title: '初期金额',
          align: 'center',
          dataIndex: 'initAmount'
        },
        {
          title: '操作前金额',
          align: 'center',
          dataIndex: 'beforeChangeAmount'
        },
        {
          title: '操作金额',
          align: 'center',
          dataIndex: 'changeAmount'
        },
        {
          title: '操作后金额',
          align: 'center',
          dataIndex: 'afterChangeAmount'
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createName'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        }
      ],
      qyeryParams:{
        date:[]
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/findPageListDetail',
      },
    }
  },
  methods:{
    searchReset(){
      let queryParam={budgetCode:this.queryParam.budgetCode}
      this.queryParam=queryParam
      this.loadData(1)
    },
    add () {
      this.edit({});
    },
    edit (record) {
      this.queryParam={}
      this.model = Object.assign({}, record);
      this.queryParam.budgetCode = record.budgetCode
      this.loadData()
      this.visible = true;
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys[0] = selectedRowKeys
    },
    downExportXls(key) {
      const downurl = window._CONFIG['domianURL'] + '/cnDownloadController/saveOrUpdate'
      if (!key || typeof key != 'string') {
        this.$message.warning('未配置接口标记！')
        return
      }
      let param = {
        accountCode:this.queryParam.accountCode,
        companyCode:this.queryParam.companyCode,
        accountType:this.queryParam.accountType,
        yearBalance:this.queryParam.yearBalance,
        startDate:this.queryParam.startDate,
        endDate:this.queryParam.endDate,
        type:this.queryParam.type
      }
      console.log(param)
      let expParams = JSON.stringify(param)
      // expParams = escape(expParams)
      console.log(Base64.encode(expParams))
      postAction(downurl, { impKey: key, expParams: Base64.encode(expParams) }).then((res) => {
        if (res.success) {
          this.$message.info(res.message + ',等待下载完成！')
        } else {
          this.$message.warn(res.message)
        }
      })
    },

    handleOk () {
      let data
      const that = this;
      that.$emit('ok',this.selectedRowKeys,this.selectionRows[0]);
      that.confirmLoading = false;
      that.close();
    },
    handleCancel () {
      this.close()
    },

    dateRangeChange(date){
      if(!date){
        this.queryParam.startDate=''
        this.queryParam.endDate=''
        return
      }
      this.queryParam.startDate=date[0]
      this.queryParam.endDate=date[1]
    }
  }

}
</script>

<style scoped>
.btn{
  z-index:9999;
  background-color: #FFFFFF;
  position: absolute;
  bottom:0;
  width: 96%;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  text-align: right;
}
.flex{
  display: flex;

}
.wrap{
  flex-wrap: wrap;
}
.items{
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.items-text{
  width: 60px;
  margin-right: 10px;
  text-align: right;
}
.button{
  width: 200px;
  flex-shrink: 0;
}
</style>